<!--
/**
* Author: KSJ
* Date: 2023-12-21 09:30
*/
-->
<template>
  <zm-view background="#ffffff">
    <view class="p-24">
      <view class="mb-16 font-bold font-32 text-required">问题描述</view>
      <view class="textarea-wrap">
        <textarea
          v-model="form.content"
          auto-height
          class="textarea"
          maxlength="300"
          placeholder-style="color:#999;font-size: 26rpx;font-weight: 500;"
          placeholder="请填写你遇到的问题"
          @input="handleInput"
        />
        <text class="text-count">{{ form.content.length }}/300</text>
      </view>
      <view class="flex items-center mb-16">
        <text class="font-bold font-32 mr-10">上传图片</text>
        <text>(最多3张)</text>
      </view>
      <view class="mb-16">
        <u-upload :file-list="fileList" name="1" multiple :max-count="3" @afterRead="afterRead" @delete="deletePic"></u-upload>
      </view>
      <view class="mb-16 font-bold font-32 text-required">联系方式</view>
      <view class="w-full bg-page p-24 radius-12">
        <u-input v-model="form.mobile" placeholder="请输入联系方式" type="number" maxlength="11" font-size="30rpx" border="none" clearable></u-input>
      </view>
    </view>
    <zm-footer safe-area-inset-bottom>
      <view class="grid grid-cols-2 gap-x-30 px-24 py-30">
        <zm-button size="medium" round plain @click="jumpRecord">反馈记录</zm-button>
        <zm-button size="medium" round @click="submit">提交</zm-button>
      </view>
    </zm-footer>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import base64 from "@/utils/encode/base64"
export default {
  mixins: [page],
  data() {
    return {
      form: {
        mobile: "",
        imageList: "",
        content: ""
      },
      fileList: []
    }
  },
  methods: {
    // 限制移动端复制超过规定长度限制
    handleInput() {
      if (this.form.content.length > 300) {
        this.$toast("已超过300字符限制")
        this.form.content = this.form.content.slice(0, 300)
      }
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.fileList.length
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中"
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.fileList[fileListLen]
        this.fileList.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.url
          })
        )
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise(async (resolve) => {
        const uploadRes = await uni.$api.upload.uploadImage(url)
        resolve(uploadRes)
      })
    },
    jumpRecord() {
      this.toView({
        url: "pages/person/feedback-record/feedback-record"
      })
    },
    submit() {
      if (this.form.content.length == 0) {
        uni.$toast({ type: "error", content: "请填写问题描述" })
        return
      }
      if (this.form.mobile.length != 11) {
        uni.$toast({ type: "error", content: "手机号格式错误" })
        return
      }
      this.form.imageList = this.fileList.map((item) => item.url)
      const form = uni.$clone(this.form)
      form.content = base64.encode(form.content)
      form.imageList = form.imageList.join(",")
      uni.$api.feedback.submission(form).then(() => {
        uni.$toast({ type: "success", content: "提交成功" })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.textarea-wrap {
  padding: 20rpx;
  margin-bottom: 16rpx;
  position: relative;
  border-radius: 16rpx;
  background-color: #f4f6f7;
  .textarea {
    width: 100%;
    font-size: 26rpx;
    min-height: 280rpx;
    margin-bottom: 20rpx;
  }
  .text-count {
    z-index: 10;
    right: 24rpx;
    bottom: 20rpx;
    color: #999999;
    font-size: 20rpx;
    position: absolute;
  }
}
::v-deep .textarea-placeholder {
  color: #999999;
  font-size: 26rpx;
}
</style>
